<template>
  <div class="container">
    <!-- 筛选列表 -->
    <el-card class="box-card" style="margin-top:20px">
      <div slot="header" class="clearfix">
        <span>筛选列表</span>
      </div>
      <div class="text item">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
          <el-form-item label="标签：" prop="labelId">
            <el-select
              v-model="queryParams.labelId"
              placeholder="请选择标签"
              clearable
              size="small"
            >
              <el-option
                v-for="(item, index) in labelList"
                :key="index"
                :label="item.labelName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="展示时间：">
            <el-date-picker
              v-model="datePicker"
              size="small"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="datePickerChange"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="handleQuery" v-hasPermi="['gwoper:news:query']"
            >查询</el-button
            >
            <el-button size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <!-- 表格 -->
    <el-card class="box-card" style="margin-top:20px">
      <div slot="header" class="clearfix">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['gwoper:news:add']"
        >新增</el-button
        >
        <el-button
          type="primary"
          size="mini"
          style="float: right;"
          @click="handleExport"
          v-hasPermi="['gwoper:news:export']"
        >导出数据</el-button
        >
      </div>
      <div v-show="isChangeTable" class="text item">
        <div class="changeBtn">
          <el-button
            type="primary"
            size="mini"
            style="float: right;"
            @click="isChangeTable = !isChangeTable"
          >批量管理</el-button
          >
        </div>
        <el-table v-loading="loading" :data="informationList">
          <el-table-column label="ID" align="center" prop="id" />
          <el-table-column
            label="缩略图"
            align="center"
          >
            <template slot-scope="scope">
              <div class="img_cursor" @click="$router.push({path:'/gwoper/preview', query: {id: scope.row.id}})">
                <el-image style="width: 50px;border:0;min-height: 0 !important;" :src="scope.row.cover"></el-image>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="点击量"
            prop="hitCounts"
            align="center"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="标签" align="center" prop="labelName" />
          <el-table-column label="展示时间" align="center" min-width="190">
            <template slot-scope="scope">
              <span
              >{{ scope.row.showBeginTime }} --
                {{ scope.row.showEndTime }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            min-width="150"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                v-hasPermi="['gwoper:news:edit']"
                @click="handleUpdate(scope.row)"
              >修改</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                class="btn_close"
                v-hasPermi="['gwoper:news:remove']"
                @click="handleDelete(scope.row.id)"
              >删除</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-upload2"
                v-hasPermi="['gwoper:news:publishout']"
                @click="handlePutAway(scope.row)"
              >发布</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-show="!isChangeTable" class="text item">
        <div class="changeBtn">
          <el-button
            type="primary"
            size="mini"
            style="float: right;"
            @click="isChangeTable = !isChangeTable"
          >完成管理</el-button
          >
          <el-button
            type="primary"
            size="mini"
            style="float: right;margin-right:10px;"
            v-hasPermi="['gwoper:news:publishout']"
            @click="batchPutAway"
          >发布</el-button>
          <el-button
            type="primary"
            size="mini"
            style="float: right;margin-right:10px;"
            v-hasPermi="['gwoper:news:remove']"
            @click="batchDelete"
          >批量删除</el-button>
        </div>
        <el-table
          v-loading="loading"
          :data="informationList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="ID" align="center" prop="id" />
          <el-table-column
            label="缩略图"
            :show-overflow-tooltip="true"
            align="center"
          >
            <template slot-scope="scope">
              <div class="img_cursor" @click="$router.push({path:'/gwoper/preview', query: {id: scope.row.id}})">
                <el-image style="width: 50px;border:0;min-height: 0;" :src="scope.row.cover"></el-image>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="标签" align="center" prop="labelName" />
          <el-table-column label="展示时间" align="center" min-width="190">
            <template slot-scope="scope">
              <span
              >{{ scope.row.showBeginTime }} --
                {{ scope.row.showEndTime }}</span
              >
            </template>

          </el-table-column>

          <el-table-column
            label="操作"
            align="center"
            min-width="100"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                v-hasPermi="['gwoper:news:edit']"
                @click="handleUpdate(scope.row)"
              >修改</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                class="btn_close"
                v-hasPermi="['gwoper:news:remove']"
                @click="handleDelete(scope.row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script>
  import {
    listInformation,
    delInformation,
    batchUpdateSellStatus
  } from "@/api/gwoper/news";
  import { listLabel } from "@/api/gwoper/label";
  export default {
    name: "newsMatter",
    data() {
      return {
        id:'',
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 资讯表格数据
        informationList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          orderNo: null,
          showBeginTime: null,
          showEndTime: null,
          labelId: null,
          param:"{onSell: '0,2'}"
        },
        // 展示时间绑定值 数组
        datePicker: [],
        statusOptions: [
          {
            label: "下架",
            value: 0
          },
          {
            label: "上架",
            value: 1
          },
          {
            label: "待上架",
            value: 2
          },
        ],
        labelList: [], // 图文标签列表
        // 表单参数
        form: {},
        // 表单校验
        rules: {},
        isChangeTable: true // 控制两个表格的切换
      };
    },
    created(){
      this.getlabelList()
      this.getList()
    },
    watch: {
      '$route.path'(val){
        if(val=='/gwoper/news'){
          this.getList()
        }
      }
    },
    methods: {
      // 获取图文标签列表
      getlabelList() {
        listLabel({ status: 1, pageNum: 1, pageSize: 10000 })
          .then(response => {
            console.log(response);
            if (response.code != 200) {
              return this.msgError(response.msg);
            }
            this.labelList = response.rows;
          })
          .catch(error => {
            console.log(error);
          });
      },
      uploadNews(ids, status) {
        let title = "";
        if (status == 1) {
          title = "发布";
        } else {
          title = "下架";
        }
        this.$confirm(`是否确认${title}id为${ids}的图文?`, "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            batchUpdateSellStatus(ids, status).then(response => {
              console.log(response);
              if (response.code != 200) return this.msgError(response.msg);
              this.msgSuccess(response.msg);
              this.getList();
              this.$parent.NewsPut()
              console.log(this.isChangeTable)
              this.ids = []
            });
          })
          .catch(() => {
            this.msgInfo(`取消${title}`);
          });
      },
      // 批量发布
      batchPutAway() {
        if (this.ids.length <= 0) {
          return this.msgInfo("请选择需要上架的图文");
        }
        this.uploadNews(this.ids.join(","), 1);
      },
      // // 批量下架
      // batchSoldOut() {
      //   if (this.ids.length <= 0) {
      //     return this.msgInfo("请选择需要下架的图文");
      //   }
      //   this.uploadNews(this.ids.join(","), 0);
      // },
      // 单个发布
      handlePutAway(row) {
        this.uploadNews(row.id, 1);
      },
      // 单个下架
      // handleSoldOut(row) {
      //   this.uploadNews(row.id, 0);
      // },
      // 批量删除
      batchDelete() {
        console.log(this.ids);
        if (this.ids.length <= 0) {
          return this.msgInfo("请选择需要删除的图文");
        }
        this.handleDelete(this.ids.join(","));
      },
      /** 删除按钮操作 */
      handleDelete(id) {
        const ids = id;
        this.$confirm('是否确认删除资讯编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            delInformation(ids).then(response => {
              console.log(response);
              if (response.code != 200) return this.msgError(response.msg);
              this.getList();
              this.ids = [];
              this.msgSuccess(response.msg);
            });
          })
          .catch(() => {
            this.msgInfo("取消删除");
          });
      },
      // 展示时间改变触
      datePickerChange(val) {
        console.log(val);
        this.queryParams.showBeginTime = val[0];
        this.queryParams.showEndTime = val[1];
      },
      /** 查询资讯列表 */
      getList() {
        this.loading = true;
        listInformation(this.queryParams)
          .then(response => {
            console.log(response);
            if (response.code != 200) {
              this.loading = false;
              return this.msgError(response.msg);
            }

            this.informationList = response.rows;
            this.total = response.total;
            this.$emit('closeNewsMatter', this.total)
            this.loading = false;
          })
          .catch(error => {
            this.loading = false;
            console.log(error);
          });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.$refs["queryForm"].resetFields();
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          orderNo: null,
          showBeginTime: null,
          showEndTime: null,
          labelId: null,
          param:"{onSell: '0,2'}"
        };
        this.datePicker = [];
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id);
        this.single = selection.length !== 1;
        this.multiple = !selection.length;
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.$router.push("/gwoper/addnews");
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        const id = row.id;
        this.$router.push({
          path: "/gwoper/addnews",
          query: { id: id }
        });
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download(
          "operation-center/information/export",
          {
            ...this.queryParams
          },
          `资讯图文列表.xlsx`
        );
      }
    }
  };
</script>

<style scoped>
  @import "../../assets/styles/card.scss";
  .img_cursor{
    cursor: pointer;
  }

</style>
